<template>
   <div class="main freight-type-list">
        <div class="filter-container">
            <el-input @keyup.enter.native="search" class="filter-item" placeholder="按模板名称搜索" v-model="keyword"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
        <div class="feight-table-wrapper">
            <div class="freight-btn-wrapper">
                <p class="freight-tip" v-show="hasDefault">提示：第一条模板为默认运费模板</p>
                 <el-button v-if="rightsButtons['add']" type="success" size="small"  icon="el-icon-plus" class="filter-item look-btn" @click="goNext('freightTemplateAdd')">新建模板</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row :row-class-name="tableRowClassName">
                <el-table-column align="center" label="ID" prop="id"></el-table-column>
                <el-table-column align="center" label="模板名称" prop="name"></el-table-column>
                <el-table-column align="center" label="计算类型" prop="calcuType">
                  <template slot-scope="scope">{{getType(scope.row.calcuType)}}</template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                <el-table-column align="center" label="操作" v-if="rightsButtons['edit']||rightsButtons['copy']">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                        <!-- <el-button type="danger" size="mini" @click="del(scope.row)" :loading="btnLoading">删除</el-button> -->
                        <el-button v-if="rightsButtons['copy']" type="success" size="mini" plain @click="handleCopy(scope.row.id)">复制</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="pagination-container" v-if="total > 0">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-size="pageSize"
                :total="total"
                layout="total, prev, pager, next, jumper"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import {getTemplateList, delTemplateById, getTemplateById} from '@/api/freight'
import { duration } from 'moment'
export default {
    name: 'freight',
    data () {
        return {
            keyword: '',
            listLoading: false,   // 显示表格加载动画
            list: [
                // {
                //     id: 1,
                //     name: '自营包邮',
                //     time:'2019-04-03 12:12:12'
                // }
            ],
            page: 1, // 当前页
            total: 0,  // 总页数
            pageSize: 10,  // 每页多少条
            btnLoading: false
        }
    },
    created() {
        this.getList()
    },
    computed: {
        hasDefault(){
            const index =  this.list.filter(item => item.defaulted)
            return index.length > 0 ? true : false
        }
    },
    methods: {
      // 复制运费模板
      handleCopy (id){
        getTemplateById(id).then((res) => {
          if (res.code == 0) {
            sessionStorage.setItem('shippingData', JSON.stringify({ ...res.data, id: '' }))
          } else {
            sessionStorage.removeItem('shippingData')
          }
        }).catch(err => {
          sessionStorage.removeItem('shippingData')
        })
        this.$router.push({ name: 'freightTemplateAdd' });
      },
        // 计费类型返回
        getType(val) {
          let res=''
          switch (val) {
            case 1:
              res = '重量'
              break
            case 3:
              res = '件数'
              break
            default: ''
          }
          return res
        },

        // 获取运费模板列表
        getList() {
            const params = {
                keyword: this.keyword,
                page: this.page,
                pageSize: this.pageSize
            }
            this.listLoading = true
            getTemplateList(params).then(res => {
                if (res.code == 0) {
                    this.list = res.data.rows
                    this.total = res.data.total - 0
                }
                this.listLoading = false
            }).catch(err => {
                this.list = []
                this.total = 0
                this.listLoading = false
            })
        },
        /**
         * 查看运费模板列表,配置详情
        */
       goNext(name) {
         sessionStorage.removeItem('shippingData')
           this.$router.push({
               name: name
           })
       },
        /**
         * 搜索
        */
        search() {
            this.getList()
        },
        /**
         * 分页切换
        */
        handleCurrentChange(index) {
           this.page = index
           this.getList()
        },
        // 编辑
        showEdit(info) {
             this.$router.push({
               name: 'freightTemplateEdit',
               params: {
                   id: info.id
               }
           })
        },
        // 删除
        del(info) {
            this.btnLoading = true
           delTemplateById({id: info.id}).then(res => {
               if (res.code == 0) {
                   this.$message({
                       type: 'success',
                       message: '删除成功',
                       duration: 1000
                   })
               } else {
                   this.$message({
                       type: 'error',
                       message: res.msg,
                       duration: 2000
                   })
               }
               this.btnLoading = false
           }).catch(err => {
               this.btnLoading = false
               this.$message({
                    type: 'error',
                    message: '未知错误',
                    duration: 2000
                })
           })
        },
        tableRowClassName({row}){
            if (row.defaulted) {
                return 'bgColor'
            } else {
                return ''
            }
        }

    }
}
</script>

<style scoped>
    .look-btn {
        float: right;
        margin-right: 20px;
    }
    .feight-table-wrapper {
        background-color: #fff;
    }
    .freight-btn-wrapper {
        overflow: hidden;
        padding: 20px 0;
    }
    .freight-tip {
        font-size: 16px;
        float: left;
        line-height: 40px;
        padding-left: 20px;
    }
    .bgColor {
        background-color: #ccc !important;
    }
</style>
